<template>
	<view>
		<view class="container">
			<view class="topbox">
			</view>
			<view class="paycard">
				<view class="left-icon">
					<image src="../../../static/images/passicon.png" class="left-img"></image>
				</view>
				<view class="left-box">
					<view class="title">访客通行</view>
					<view class="text">在这里您可以将您所在社区下单元的开门权限分享给好友，好友即可一键开门，方便你我他！</view>
					<view class="select-box">
						<xfl-select :list="list" :clearable="false" :initValue="list[0].value" @change="change" :showItemNum="10" :placeholder = "'请选择'" :isCanInput="false"  :style_Container="listBoxStyle" @visible-change='visibleChange'>
						</xfl-select>
					</view>
				</view>
			</view>
			<view class="card" v-for="(item,index) in listdata">
				<view class="card-icon">
					<image src="../../../static/images/lock.png" class="card-img"></image>
				</view>
				<view class="right-box">
					<view class="text1">{{item.floor_name}}</view>
					<view class="title1">{{item.floor_layer}}</view>
				</view>
			</view>
			<view class="footer_btn">
				<button type="primary" :style="btn_style" class="btn" @click="btnpay">分享给访客开门</button>
			</view>
			<view>
				<uni-popups ref="popups" type="center" style="width: 100%;">
					<image :src="visitor_open_img" class="popups-img"></image>
				</uni-popups>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopups from "../../../appComponent/uni/uni-popups/uni-popups.vue"
	import xflSelect from '../component/xfl-select/xfl-select.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getvisitorList = () => {
		common.post('HouseApi&a=visitor_list_open', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('++++', data)
			_this.list = data.time_list;
			_this.type = data.time_list[0].type;
			_this.num = data.time_list[0].time;
			_this.listdata = data.list;
			_this.visitor_open_img = data.visitor_open_img;
		});
	};
	const getshare = () => {
		common.post('HouseApi&a=house_village_door_share_add', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			share_time_type: _this.type,
			share_time_length: _this.num,
		}, data => {
			console.log('hhhhhhhhh', data)
			_this.door_share_id = data.door_share_id;
			_this.share_weixin_info = data.share_weixin_info;
			_this.share_wxapp_info = data.share_wxapp_info;
			
			uni.navigateTo({
				url:'/pages/index/share?shareTitle=' + encodeURIComponent(data.share_wxapp_info.tContent)
				+ '&door_share_id=' + _this.door_share_id + "&sharePath=" + encodeURIComponent(data.share_wxapp_info.sendFriendLink) + '&shareImg=' + encodeURIComponent(data.share_wxapp_info.img) + "&title=" + encodeURIComponent(data.share_wxapp_info.tTitle)
			})
		});
	};
	export default {
		data() {
			return {
				listBoxStyle: `height: 50rpx;background-color: rgba(38,129,243,0.2);border-radius: 10rpx;border: 0rpx;`, //下拉选择框样式
				listdata: {},
				list:[],
				village_id: 0,
				pigcms_id: 0,
				village_name:'',
				actcolor: '',
				btn_style: '',
				order_id: 0,
				text:'',
				type: 0,
				num: 0,
				visitor_open_img:'',
				share_weixin_info: {},
			}
		},
		onShow() {
			// #ifdef H5
				if(_this.village_id){
					_this.setWxShare()
				}
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.order_id = options.order_id
			// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor + ';';
					
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				
				if (!app.globalData.is_login || !_this.pigcms_id || _this.pigcms_id == 0) {
					if (common.checkIsFooterPage("/pages/village_menu/my")) {
						wx.switchTab({
							url: "/pages/village_menu/my"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village_menu/my',
						})
					}
					return false;
				}
				
				getvisitorList();
			});
		},
		methods: {
			btnpay() {
				if(!_this.type || _this.type == 0){
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请选择门禁有效时间'),
						showCancel: false,
						confirmText: common.changeTxt('确定'),
						success: function(res) {
							if (res.confirm) {
								
							}
						}
					});
					return false;
				}
				getshare();
			},
			visibleChange(isShow) { // 列表框的显示隐藏事件
				console.log('isShow::', isShow);
			},
			change({
				newVal,
				oldVal,
				index,
				orignItem
			}) {
				console.log("1111111111111",orignItem)
				_this.type = orignItem.type;
				_this.num = orignItem.time;
				console.log("2222222222222", orignItem);
				
			},
			setWxShare() {
				let pageLink = _this.share_weixin_info.sendFriendLink + "?door_share_id" + _this.door_share_id;
				pageLink = common.addShareParam(pageLink);
				let shareWxLink = pageLink
				var shareData = {
					title: _this.share_weixin_info.tTitle,
					desc: _this.share_weixin_info.tContent,
					sendFriendLink: shareWxLink,
					share_img: _this.share_weixin_info.img,
				}
				console.log('shareData', shareData);
				common.setWxShare(shareData)
			},
			
		},
		components: {
			uniPopups,
			xflSelect
		},
	}
</script>

<style>
	page {
		background-color: rgb(255, 255, 255);
	}

	.container {
		margin: 0;
		padding: 0;
		background-color: rgb(255, 255, 255);
		padding-bottom:170rpx;
		padding-bottom: calc(170rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
	}

	.topbox {
		width: 100%;
		height: 200rpx;
		background-color: #2681f3;
	}

	.paycard {
		margin: 0 30rpx;
		background-color: #ffffff;
		height: 100%;
		border-radius: 20rpx;
		margin-top: -170rpx;
		padding: 50rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left-icon {
		width: 204rpx;
		height: 204rpx;
		flex-shrink: 0;
	}

	.left-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.left-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 40rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: 600;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #424242;
	}

	.text {
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 36rpx;
		letter-spacing: 0rpx;
		color: #666666;
	}
	.select-box {
		height: 100%;
		margin-top: 20rpx;
	}
	/deep/ .show-box {
		height: 50rpx !important;
		background-color: rgba(38,129,243,0.2);
		border-radius: 10rpx;
		border: 0rpx;
	}
	/deep/ .show-box .input {
		color: #2681f3;
	}
	.card {
		margin: 0 40rpx;
		background-color: #f1f7ff;
		height: 100%;
		margin-top: 20rpx;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.card-icon {
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
	}
	.card-img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.right-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin-left: 20rpx;
	}
	.text1 {
		font-size: 32rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 45rpx;
		letter-spacing: 0rpx;
		color: #202020;
	}
	
	.title1 {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #666666;
	}
	.footer_btn{
		position: fixed;
		bottom:0rpx;
		left:0;
		width:100%;
		background:white;
		padding:40rpx 0;
		padding-bottom: 40rpx;
		padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}
	.btn {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		border-radius: 44rpx;
		margin: 0rpx 100rpx;
		border: 0rpx;
	}
	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: rgba(255,255,255,0);
		position: absolute !important;
		top: 0;
		right: 0;
	}
</style>
